<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

  <title>活动聚 - 选择活动模板</title>
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <link rel="stylesheet" href="../../css/mgt/editActivity/edit.css">
  <link rel="stylesheet" href="../../css/mgt/common/public.css">
  <link rel="stylesheet" href="../../css/mgt/common/font-awesome.min.css">
  <link rel="stylesheet" href="../../css/mgt/common/animate.css">
  <link rel="stylesheet" href="../../css/mgt/template/edit_template.css">
  <script src="../../js/mgt/common/stats.js" name="MTAH5" sid="500494818" cid="500494820"></script>
  <script src="../../js/mgt/common/jquery2.1.2.js"></script>
  <script src="../../js/mgt/common/common.js"></script>
  <script src="../../js/mgt/common/public.js"></script>
  <script src="../../js/mgt/common/jquery.nicescroll.js"></script>
  <style>
    html, body {
      width: 100%;
      height: auto;
      background-color: #F0F0F0;
      overflow-x: hidden;
    }

    /*@media screen and (max-width: 1440px) {*/
    /*.m-fixed-right{*/
    /*transform: scale(0.7,0.7);*/
    /*top: -50px;*/
    /*}*/
    /*}*/
    body .lay-temp-preview {
      border-radius: 5px;
    }

    /* 设置滚动条的样式 */
    body ::-webkit-scrollbar {
      width: 10px;
    }

    /* 滚动槽 */
    body ::-webkit-scrollbar-track {
      -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
      border-radius: 10px;
    }

    /* 滚动条滑块 */
    body ::-webkit-scrollbar-thumb {
      border-radius: 10px;
      background: darkgrey;
      /*-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);*/
    }

    body ::-webkit-scrollbar-thumb:window-inactive {
      background: darkgrey;
    }
  </style>
  <link rel="stylesheet" href="../../css/mgt/common/layer.css" id="layuicss-skinlayercss">
</head>
<body>
<header>
  <span>选取模板</span>
</header>
<div id="nice-scroll-left" class="m-fixed-left">
  <div class="m-type-container">
    <div class="m-type-title">
      <span class="m-type-title-line"></span>
      <span>风格 :</span>
    </div>
    <ul id="style_tags_ul" class="m-type-box m-style-ul">
      <li data-type="1" data-index="" class="orange">全部</li>
      <li data-type="1" data-index="0">商务</li>
      <li data-type="1" data-index="3">浪漫</li>
      <li data-type="1" data-index="4">唯美</li>
      <li data-type="1" data-index="5">温馨</li>
      <li data-type="1" data-index="6">活力</li>
      <li data-type="1" data-index="7">青春</li>
      <li data-type="1" data-index="8">时尚</li>
      <li data-type="1" data-index="9">素简</li>
      <li data-type="1" data-index="10">可爱</li>
      <li data-type="1" data-index="12">小清新</li>
    </ul>
  </div>
  <div class="m-type-container">
    <div class="m-type-title">
      <span class="m-type-title-line"></span>
      <span>场景 :</span>
    </div>
    <ul id="scene_tags_ul" class="m-type-box m-place-ul">
      <li data-type="3" data-index="" class="orange">全部</li>
      <li data-type="3" data-index="0">通用</li>
      <li data-type="3" data-index="2">讲座</li>
      <li data-type="3" data-index="3">培训</li>
      <li data-type="3" data-index="4">旅游</li>
      <li data-type="3" data-index="5">运动</li>
      <li data-type="3" data-index="9">聚会</li>
      <li data-type="3" data-index="10">观影</li>
      <li data-type="3" data-index="11">演出</li>
      <li data-type="3" data-index="12">美食</li>
      <li data-type="3" data-index="13">亲子</li>
      <li data-type="3" data-index="14">时尚</li>
      <li data-type="3" data-index="16">公益</li>
      <li data-type="3" data-index="17">玩乐</li>
    </ul>

  </div>
  <div class="m-type-container">
    <div class="m-type-title">
      <span class="m-type-title-line"></span>
      <span>色系 :</span>
    </div>
    <ul id="color_tags_ul" class="m-type-box m-color-ul">
      <li data-type="2" data-index="" class="orange">全部</li>
      <li data-type="2" data-index="0">
        <span class="m-color-icon" style="background-color: red"></span>
        <span> 红色</span>
      </li>
      <li data-type="2" data-index="1">
        <span class="m-color-icon" style="background-color: #ffa500"></span>
        <span> 橙色</span>
      </li>
      <li data-type="2" data-index="2">
        <span class="m-color-icon" style="background-color: #ffd700"></span>
        <span> 黄色</span>
      </li>
      <li data-type="2" data-index="3">
        <span class="m-color-icon" style="background-color: #00ff00"></span>
        <span> 绿色</span>
      </li>
      <li data-type="2" data-index="4">
        <span class="m-color-icon" style="background-color: #00FFFF"></span>
        <span> 青色</span>
      </li>
      <li data-type="2" data-index="5">
        <span class="m-color-icon" style="background-color: #0000FF"></span>
        <span> 蓝色</span>
      </li>
      <li data-type="2" data-index="6">
        <span class="m-color-icon" style="background-color: rebeccapurple"></span>
        <span> 紫色</span>
      </li>
      <li data-type="2" data-index="7">
        <span class="m-color-icon" style="background-image: url(&#39;../../images/mgt/template/white-black.png&#39;)"></span>
        <span> 黑白</span>
      </li>
      <li data-type="2" data-index="8">
        <span class="m-color-icon" style="background-image: url(&#39;../../images/mgt/template/more-color.png&#39;)"></span>
        <span> 多彩</span>
      </li>
    </ul>
  </div>

</div>
<div class="m-center">
  <ul id="template_list_ul" class="m-model-box">
    <!--固定的第一个li-->
    <li onclick="centerTemplate.openEditPage();" class="m-model-first-li">
      <div class="m-first-yuan">
        +
      </div>
      <p style="font-size: 12px">从空白页创建活动</p>
    </li>
    <li class="m-model-li" data-id="ih3a"><img src="../../images/mgt/template/150605816551014.jpg" alt="">
      <div class="m-model-title"><p title="亲子总动员丨探索植物奥秘">亲子总动员丨探索植物奥秘</p></div>
    </li>
    <li class="m-model-li" data-id="hh7a"><img src="../../images/mgt/template/1506058743151分享会.png" alt="">
      <div class="m-model-title"><p title="迷你草地音乐美食分享会">迷你草地音乐美食分享会</p></div>
    </li>
    <li class="m-model-li" data-id="vna"><img src="../../images/mgt/template/1506054840466观影会.jpg" alt="">
      <div class="m-model-title"><p title="观影会 | 闪亮的女导演们">观影会 | 闪亮的女导演们</p></div>
    </li>
    <li class="m-model-li" data-id="hs5a"><img src="../../images/mgt/template/1512984885915欢乐亲子410.png" alt="">
      <div class="m-model-title"><p title="亲子活动丨农场厨神争霸赛">亲子活动丨农场厨神争霸赛</p></div>
    </li>
    <li class="m-model-li" data-id="f9na"><img src="../../images/mgt/template/1506045029987户外徒步.jpg" alt="">
      <div class="m-model-title"><p title="徒步白岩山，遇见最美花海">徒步白岩山，遇见最美花海</p></div>
      <div class="m-model-shade">
        <button onclick="centerTemplate.useThis(this);" class="btn-f66926">立即使用</button>
        <button onclick="centerTemplate.preview(this);" class="btn-f66926" style="background-color: white!important;color: #f66926!important;border: 1px solid white!important;">点击预览</button>
      </div>
    </li>
    <li class="m-model-li" data-id="kra"><img src="../../images/mgt/template/1512985122241攀岩410.png" alt="">
      <div class="m-model-title"><p title="室内攀岩体验活动">室内攀岩体验活动</p></div>
    </li>
    <li class="m-model-li" data-id="0vfa"><img src="../../images/mgt/template/1506044933305线上直播.jpg" alt="">
      <div class="m-model-title"><p title="线上直播：职场技能提升">线上直播：职场技能提升</p></div>
    </li>
    <li class="m-model-li" data-id="cu5a"><img src="../../images/mgt/template/1506063717305web-1499395661896.jpg" alt="">
      <div class="m-model-title"><p title="吹吧电子蒸汽嘉年华">吹吧电子蒸汽嘉年华</p></div>
    </li>
    <li class="m-model-li" data-id="3iba"><img src="../../images/mgt/template/1513828232132征文.png" alt="">
      <div class="m-model-title"><p title="“我的西湖记忆”全球征文">“我的西湖记忆”全球征文</p></div>
    </li>
    <li class="m-model-li" data-id="g9fa"><img src="../../images/mgt/template/1513159140140医疗410x898.jpg" alt="">
      <div class="m-model-title"><p title="应急救护普及培训">应急救护普及培训</p></div>
    </li>
    <li class="m-model-li" data-id="etia"><img src="../../images/mgt/template/1506564848351未标题-3.jpg" alt="">
      <div class="m-model-title"><p title="3.9折!成都最文艺火锅店！">3.9折!成都最文艺火锅店！</p></div>
    </li>
    <li class="m-model-li" data-id="1u1a"><img src="../../images/mgt/template/1512985070791时尚穿搭410.png" alt="">
      <div class="m-model-title"><p title="时尚穿搭丨学会扬长避短">时尚穿搭丨学会扬长避短</p></div>
    </li>
    <li class="m-model-li" data-id="gija"><img src="../../images/mgt/template/1512984981821图书分享410.png" alt="">
      <div class="m-model-title"><p title="图书漂流分享会">图书漂流分享会</p></div>
    </li>
    <li class="m-model-li" data-id="2taa"><img src="../../images/mgt/template/1513828153980香氛.png" alt="">
      <div class="m-model-title"><p title="芳香疗法分享体验沙龙">芳香疗法分享体验沙龙</p></div>
    </li>
    <li class="m-model-li" data-id="24ea"><img src="../../images/mgt/template/1513159160688手帐课410.png" alt="">
      <div class="m-model-title"><p title="手帐课∣记录初见的悸动">手帐课∣记录初见的悸动</p></div>
    </li>
    <li class="m-model-li" data-id="e4ma"><img src="../../images/mgt/template/1512985037659盆栽手作410.png" alt="">
      <div class="m-model-title"><p title="创意盆栽手作体验课">创意盆栽手作体验课</p></div>
    </li>
    <li class="m-model-li" data-id="dtqa"><img src="../../images/mgt/template/1512985199668足球比赛410.png" alt="">
      <div class="m-model-title"><p title="“无限杯”实况足球比赛">“无限杯”实况足球比赛</p></div>
    </li>
    <li class="m-model-li" data-id="1j3a"><img src="../../images/mgt/template/1512985148331时装展410.png" alt="">
      <div class="m-model-title"><p title="灵魂恋人·艺术服饰展">灵魂恋人·艺术服饰展</p></div>
    </li>
    <li class="m-model-li" data-id="bu9a"><img src="../../images/mgt/template/1513828188616音乐会.png" alt="">
      <div class="m-model-title"><p title="爱乐汇轻音乐团音乐会">爱乐汇轻音乐团音乐会</p></div>
    </li>
    <li class="m-model-li" data-id="0kja"><img src="../../images/mgt/template/1512985101050商家优惠410.png" alt="">
      <div class="m-model-title"><p title="咖啡店老板任性，全场六折！">咖啡店老板任性，全场六折！</p></div>
    </li>
    <li class="m-model-li" data-id="3s9a"><img src="../../images/mgt/template/1513828218138桌游.png" alt="">
      <div class="m-model-title"><p title="迷波隆桌游大乱斗">迷波隆桌游大乱斗</p></div>
    </li>
    <li class="m-model-li" data-id="fira"><img src="../../images/mgt/template/1513159117666撸串410x898.jpg" alt="">
      <div class="m-model-title"><p title="7折！坐在花园里撸串！">7折！坐在花园里撸串！</p></div>
    </li>
    <li class="m-model-li" data-id="bkba"><img src="../../images/mgt/template/1506045003757公益讲座.jpg" alt="">
      <div class="m-model-title"><p title="公益讲座：如何突破人生局限">公益讲座：如何突破人生局限</p></div>
    </li>
  </ul>
  <div id="loading_more" class="none" style="text-align: center; font-size: 14px; padding: 15px 0px; color: darkgrey; display: none;">
    <span class="fa fa-spinner fa-spin fa-lg"></span>
    <span>加载中</span>
  </div>
  <p class="none nomore-template" style="text-align: center;font-size: 14px;padding: 15px 0;color: darkgrey;">--------没有更多模板了--------</p>
</div>
<!--右侧手机框预览改为弹窗形式，先display none-->
<div class="m-fixed-right none">
  <div class="m-phone-border">
    <div class="m-phone-content">
      <!--<iframe src="http://www.hdj.com/studio/templateDetail?id=1" frameborder="0"></iframe>-->
    </div>
  </div>
  <div class="m-right-btn-box">
    <button onclick="centerTemplate.useThisAll();" class="orange btn-f66926">立即使用</button>
  </div>
</div>

<!--预览弹窗-->
<div class="lay-template-preview none" style="display: none;">
  <div class="lay-temp-iframe-box">
    <div class="lay-temp-preview-btn">
      <button class="lay-temp-use-btn">立即使用</button>
    </div>
    <span class="fa fa-clock-o"></span>
  </div>

</div>


<script src="../../js/mgt/common/layer.js"></script>
<script src="../../js/mgt/template/edit.template.js"></script>
<script src="../../js/mgt/template/edit.template.ajax.js"></script>
<script type="text/javascript" src="../../data/mgt/stats" charset="UTF-8"></script>

<div class="back-top-btn" style="display: none;"><img src="../../images/mgt/template/backtop-icon.png" alt=""></div>
<div class="layui-layer-move"></div>
</body>
</html>